<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <i v-if="!collapse" class="el-icon-s-fold"></i>
      <i v-else class="el-icon-s-unfold"></i>
    </div>
    <div class="logo">{{userTitle}}</div>

    <div class="header-right">
      <div class="header-user-con">
        <!-- 全屏显示 -->
        <!-- <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div> -->

        <!-- 用户头像 -->
        <!-- <div class="user-avator">
                    <img src="../../assets/img/img.jpg" />
                </div> -->
        <div type="text" style="color:#409EFF;font-size:15px;padding-right:30px;">剩余过滤次数:{{ filterNum }}</div>
        <el-button type="text" @click="resetDDWVIP" style="font-size:15px;padding-right:30px;">充值</el-button>
        <!-- 大指姆公众号 -->
        <el-popover placement="bottom" width="200" trigger="hover">
          <el-image style="width: 200px; height: 200px"
                    src="https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/1691484238716-1691484238716.png" fit="fill"></el-image>
          <p style="text-align:center;">扫码关注公众号</p>
          <el-button type="text" slot="reference" style="font-size:15px;padding-right:30px;">代代网公众号</el-button>
        </el-popover>
        <!-- 拨号APP下载 -->
        <el-popover placement="bottom" width="200" trigger="hover">
          <div style="text-align:center;">
            <el-image style="width: 200px; height: 200px;" src="https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/ddw1692672377810"
                      fit="fill"></el-image>
            <p style="text-align:center;">拨号APP下载（安卓）</p>
          </div>
          <el-button type="text" slot="reference" style="font-size:15px;padding-right:30px;">拨号APP下载</el-button>
        </el-popover>
        <!-- 消息中心 -->
        <!-- <div class="btn-bell" @click="messageClick">
          <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
            <i class="el-icon-bell news"></i>
          </el-tooltip>
          <span class="btn-bell-badge" v-if="message"></span>
        </div> -->
        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
                            <el-dropdown-item>项目仓库</el-dropdown-item>
                        </a> -->
            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 消息提醒列表 -->
        <el-drawer :withHeader="false" :visible.sync="messageFlg" direction="rtl">
          <div class="msg">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item name="1">
                <template slot="title">
                  <span style="flex:1;">客户跟进情况有新点评</span>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </template>
                <el-card class="box-card">
                  <div>您的客户张马达跟进记录点评更新啦！请打开 客户管理 > 我的客户 > 张马达 > 跟进备注情况 下查看</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template slot="title">
                  <span style="flex:1;">有新线索到达</span>
                  <p style="color:#999;">2023-09-17 13:22:01</p>
                </template>
                <el-card class="box-card">
                  <div>您的最新线索已到达，请注意查看信息！可请打开 客户管理 > 我的客户 下查看</div>
                  <div>您的最新线索已到达，请注意查看信息！可请打开 客户管理 > 再分配客户 下查看</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
              <el-collapse-item name="3">
                <template slot="title">
                  <span style="flex:1;">有新的签约记录</span>
                  <p style="color:#999;">2023-09-16 09:52:11</p>
                </template>
                <el-card class="box-card">
                  <div>您有新的签约记录，客户 张电费，详情可前往客户管理 > 再分配客人 > 张电费 > 签约 下查看</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
              <el-collapse-item name="4">
                <template slot="title">
                  <span style="flex:1;">有新的进件记录</span>
                  <p style="color:#999;">2023-09-15 12:42:21</p>
                </template>
                <el-card class="box-card">
                  <div>您有新的进件记录，客户 张电费，详情可前往客户管理 > 再分配客人 > 张电费 > 进件 下查看</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
              <el-collapse-item name="5">
                <template slot="title">
                  <span style="flex:1;">有新的成交记录</span>
                  <p style="color:#999;">2023-09-15 14:52:01</p>
                </template>
                <el-card class="box-card">
                  <div>您有新的成交记录，客户 张电费，详情可前往客户管理 > 再分配客人 > 张电费 > 成交 下查看</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
              <el-collapse-item name="6">
                <template slot="title">
                  <span style="flex:1;">系统维护通知</span>
                  <p style="color:#999;">2023-09-10 10:52:01</p>
                </template>
                <el-card class="box-card">
                  <div>系统将于 2023-10-01 00:00:00 至 2023-10-01 01:00:00 进行维护升级，请您合理安排使用时间，给您带来的不便敬请谅解！感谢！</div>
                  <p style="color:#999;">2023-09-19 14:52:01</p>
                </el-card>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
import bus from '../common/bus';
import Storage from '../../utils/localStorage';
import { parseTime } from '@/utils/setTime';
import { logoOutAjax, getTitleName, getVisitLunxu } from '../../api/index';
import { createSocket, sendWSPush } from '../../utils/websocket';
export default {
  data() {
    return {
      filterNum: '-',
      collapse: false,
      fullscreen: false,
      name: 'linxin',
      getRouth: "",
      itemRouth: [

      ],
      userTitle: '',
      xunset: '',

      message: 2,
      messageFlg: false,
      messageList: [],

      activeName: ''
    };
  },
  props: ["routhData", 'itemSetTime', 'bannerSettime'],
  created() {
    let path = this.$route.path.replace('/', '');
    this.getRouth = path;
    this.getName();
    clearInterval(this.xunset);
    this.listen();
  },
  watch: {
    routhData: function(n, o) {
      if (n) this.routhDataRestructure(n);
    }
  },
  computed: {
    username() {
      let username = Storage.getItem('username');
      return username ? username : this.name;
    },
  },
  methods: {
    getTimeAndNumFir(){
      getVisitLunxu().then(res => {
        this.filterNum = res.num
          
        Storage.setItem({
          name: "validTimeStorge",
          value: parseTime(res.time,'{y}-{m}-{d}')
        })
      })
    },
    resetDDWVIP(){
      this.$emit('resetDDWVIP')
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //路由取值重组
    routhDataRestructure(n) {
      for (let i = 0; i < n.length; i++) {
        if (n[i].childMenus.length > 0) {
          this.itemRouth.push({
            index: n[i].childMenus[0].url,
            title: n[i].name,
          })
        }
      }
      let path = this.$route.path.replace('/', '');
      this.getRouth = path;
      bus.$on('CTitem', msg => {
        msg.forEach((item, i) => {
          if (item.routh.indexOf(path) > -1) {
            this.getRouth = item.index;
          }
        })
      });
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'loginout') {
        logoOutAjax().then((res) => {
          if (res.code === 0) {
            Storage.removeItem('username');
            Storage.removeItem('token');
            Storage.removeItem('ddwuserData');
          }
        });
        clearInterval(this.itemSetTime);
        clearInterval(this.bannerSettime);
        clearInterval(this.xunset);
        this.$router.push('/login');
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit('collapse', this.collapse);
    },
    //获取名称
    getName() {
      getTitleName().then(res => {
        if (res.code == 0) {
          this.userTitle = res.teamName;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //轮询客户到访
    listen() {
      clearInterval(this.xunset);
      this.xunset = setInterval(() => {
        getVisitLunxu().then(res => {
          this.filterNum = res.num
          Storage.setItem({
            name: "validTimeStorge",
            value: parseTime(res.time,'{y}-{m}-{d}')
          })
          if (res.code == 0 && res.recordList.length > 0) {
            res.recordList.forEach(item => {
              this.$notify({
                title: '客户到达通知',
                message: '您的客户 ' + item.vUserName + '(' + item.vUserPhone + ') 已到达门店',
                type: 'success',
                offset: 60,
                position: 'bottom-right',
                duration: 0
              });
            })
          }
        })
      }, 10000)
    },
    //查看消息
    messageClick() {
      this.messageFlg = true;
    },
    getsocketData(e) {  // 创建接收消息函数
      const data = e && e.detail.data
      console.log(data)
    }
  },
  mounted() {
    this.getTimeAndNumFir()
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
    // createSocket('ws://192.168.0.179:8080/ddw/SysWebsocket?userid=1');
    // window.addEventListener('onmessageWS', this.getsocketData)
  },
  destroyed() {
    // clearInterval(this.xunset);
    // window.removeEventListener('onmessageWS', this.getsocketData)
  },
};
</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.header .logo {
    float: left;
    width: 135px;
    line-height: 70px;
}
.header .head-tab-href {
    float: left;
    line-height: 70px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.el-menu.el-menu--horizontal {
    border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
    height: 70px;
    line-height: 70px;
}
.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #fff;
}
.user-name {
    margin-left: 10px;
}
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.el-dropdown-link {
    color: #fff;
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
.visithead {
    margin-bottom: 15px;
    display: flex;
}
.mr10 {
    margin-right: 10px;
}
.fangwentitle {
    font-weight: bold;
    margin: -10px 0 10px;
    font-size: 15px;
}
.msg {
    color: #333;
    font-size: 14px;
    padding: 20px;
}
.news {
    animation: news 0.5s linear infinite;
}
@keyframes news {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
</style>
